@import 'theme.less';
.ocrext-ch {
  cursor:crosshair;
}
.ocrext-overlay {
  -webkit-user-select:none;
  .ocrext-mask {
    position: absolute;
    /*background: @black;
    opacity: 1;
    .transition-opacity();*/
    /*cursor: crosshair;
    transform:none;*/
    min-height: initial;
    min-width: intial;
    /* max-width: 100%;
    max-height: 100%; */
    .ocrext-overlay-corner {
      /*.transition-opacity();*/
      /*opacity: 0;*/
      background: @black;
      cursor: crosshair;
      transform:none;
      position: absolute;
      background:rgba(117,117,117,0.3);
      top:0;
      left:0;
      /*width: 100%;
      height: 100%;*/
    }
    p.ocrext-element {
      font-size: 54px;
      top:25%;
      color:#000;
      text-align: center;
      /*transform:scale(0,0);
      .transition-all();*/
      position: relative;
      /*text-shadow: 5px 3px 5px #DECECE;*/
    }
  }
	.ocrext-selector {
		background: none;
    position: absolute;
    border:@selector-border-width solid @accent;
    border-radius: @selector-border-radius; 
	}
}

.ocrext-element {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font:inherit;
  line-height: normal;
  text-decoration: none;
  text-transform: none;
  color: @fontColor;
  font-family: @fontFamily;
  font-size: @fontSize;
  font-variant: normal;
}
.ocrext-textoverlay-container {
  cursor: pointer;
  display: none;
  border: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  &.visible {
    display: block;
  }
  
  .ocrext-close-link {
    display: inline-block;
    position: absolute;
    padding: 0;
    height: 24px;
    width:24px;
    background: url('chrome-extension://__MSG_@@extension_id__/images/close.png');
    background-size: 24px; 
    top:0;
    right: 0;
    cursor: pointer;
  }
  .ocrext-text-overlay {
    display: none;
    margin: @canvas-margin;
    &.visible {
      display: flex;
      justify-content:space-around;
    }
    .ocrext-text-overlay-word-wrapper {
      position: relative;
      border: none;
      .ocrext-text-overlay-word {
        color:@word-color;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        position: absolute;
        background: rgba(255, 215, 15, 0.5);
      }
    }
  }
}


.ocrext-wrapper {
  background: @bg;
  border:none;
  border-radius: @border-radius;
  .box-shadow();
  color: @fontColor;
  display:none;
  font-family: @fontFamily;
  font-size: @fontSize;
  font-weight: normal;
  font-variant: normal;
  .wrapper-position();
  max-width: @wrapper-max-width;
  min-height: @wrapper-min-height;
  min-width: @wrapper-min-width;
  position:fixed;
  /*.transition-bottom();*/
  .transition-all();
  * {
    font: inherit;
    line-height: normal;
    color: inherit;
    text-transform: none;
  }

  .ocrext-clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
  .ocrext-clearfix { display: inline-block; }

  /* start commented backslash hack \*/
  * html .ocrext-clearfix { height: 1%; }
  .ocrext-clearfix { display: block; }
  /* close commented backslash hack */

  /*Header*/
  header.ocrext-header {
    background: @primary;
    border-radius:@header-border-radius;
    position: relative;
    left: 0;
    top: 0;
    height: auto;
    padding: 0;
    margin: 0;
    min-width: initial;
    min-height:45px; 
    height:45px;
    box-sizing:border-box;
    overflow: hidden;
    .box-shadow();
    cursor:pointer;
    .ocrext-title {
      color: @white;
      text-align: left;
      /*padding: @header-padding; */
      border-radius:@header-border-radius;
      font-weight: bold;
      font-size: @title-font-size;
      padding: 15px 0 8px 15px;
      margin: 0;
      .ocrext-settings-link {
        display: inline-block;
        float: right;
        margin: -4px 25px 0 0;
        padding: 0;
        height: 24px;
        width:24px;
        background: url('chrome-extension://__MSG_@@extension_id__/images/gear.png');
      }
    }
  }

  /*Content*/
  .ocrext-content {
    padding:5px 30px 10px 30px;

    /*Canvas container*/
    .ocrext-canvas-container {
      position: relative;
      margin:5px auto 10px auto;
      min-width: @canvas-min-width;
      max-height: @canvas-max-height;
      width: 100%;
      overflow:auto;
      .box-shadow();
      .transition-height();
      #ocrext-can{
        margin:@canvas-margin;
        display: block;
        cursor: pointer;
      }
    }
    
    /*Ouput Container*/
    .ocrext-ocr-output {
      /*margin:30px 0;*/
      padding: 0 7px;
      /* max-height: @output-max-height;
       min-height: @output-min-height;  */ 
      height: @output-height;
      margin-bottom: 10px;
      overflow-y:hidden;
      position: relative;
      .transition-height();
      .ocrext-status {
        text-align: center;
        padding: 0 10px;
        margin: 0 7px 5px 0;
        height: 0px;
        overflow: hidden;
        font-weight: bold;
        font-size: 14px;
        .transition-height();
        &.ocrext-error {
          color:@error;
          height: 16px;
        }
        &.ocrext-success {
          color:@success;
          height: 16px;
        }
        &.ocrext-progress {
          color:@progress;
          height: 16px;
        }
      }
      .ocrext-spinner-wrapper {
        position: absolute;
        left: 50%;
        top:60px;
        pointer-events:none;
        .ocrext-spinner{
          width: @main-spinner-dim;
          height: @main-spinner-dim;
          position:relative;
          left:-50%;
        }
      }
      
      /* p{
        margin:10px 0 0 0;
        text-align: left;
      } */
      .ocrext-grid {
        padding: 0 8px;
        box-sizing:border-box;
        &:last-child{
          margin:14px auto 0 auto;
        }
      }
      .ocrext-cell {
        float: left;
        margin: 0;
        /* &:nth-child(2) {
          margin-left: 25px;
        } */
        &.ocrext-cell-small {
          width:20%;
        }
        &.ocrext-cell-large{
          width: 80%;
        }
      }
      h5.ocrext-label {
        /*margin:0 0 5px 0;*/
        border-right: 2px solid @primary;
        padding: 8px 10px 3px 0;
        font-weight: bold;
        font-size: 16px;
        word-wrap: break-word;
        text-align: center;
        span {
          font:inherit;
          font-size: 14px;
          line-height: 1.5;
          display: inline-block;
          width: 100%;
          padding: 2px 2px 0 0;
          .ellipsis();
        }
        
      }
      p.ocrext-result {
        /*margin:10px 0 15px 0;*/
        box-sizing:border-box;
        padding: 5px 0 0 15px;
        height: 85px;
        overflow-y: auto;
        -webkit-user-select:text;
        user-select:text;
        text-align: justify;
        font-size: @result-font-size;
        line-height: @result-line-height;
        word-wrap:break-word;
      }
      p.ocrext-ocr-message,
      p.ocrext-ocr-translated {
        &.ocrext-font-48px {
          font-size: 48px;
          line-height: 48px;
        }
        &.ocrext-font-42px {
          font-size: 42px;
          line-height: 42px;
        }
        &.ocrext-font-36px {
          font-size: 36px;
          line-height: 36px;
        }
        &.ocrext-font-32px {
          font-size: 32px;
          line-height: 32px;
        }
        &.ocrext-font-28px {
          font-size: 28px;
          line-height: 28px;
        }
        &.ocrext-font-24px {
          font-size: 24px;
          line-height:24px;
        }
        &.ocrext-font-20px {
          font-size: 20px;
        }
        &.ocrext-font-18px {
          font-size: 18px;  
        }
        &.ocrext-font-16px {
          font-size: 16px;  
        }
        &.ocrext-font-14px {
          font-size: 14px;
        }
        &.ocrext-font-12px {
          font-size: 12px;
        }
      }
      p.ocrext-ocr-message.expanded {
        height:170px;
      }
      /*padding:5px;*/
    }
    
    /*Bottom buttons container*/
    .ocrext-footer {
      .ocrext-quickselect-btn-container {
        /*float: left;*/
        
        display: flex;
        flex-direction: row;
        justify-content: center;
        button.ocrext-btn {
          margin-bottom: 5px;
          margin-right:5px;
          padding: 0 8px;
          min-width: 46px;
          &.selected {
            cursor: default;
            opacity: 0.6;
          }
        }
        button.ocrext-btn:last-child {
          margin-right: 0;
        }
      }
      .ocrext-btn-container {
        /*float: right;*/
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        button.ocrext-btn {
          margin-bottom: 5px;
          /*margin-right:15px;*/
          padding: 0 16px;
        }
        /* .ocrext-ocr-close {
          margin-right: 0;
        } */
      }
    }
    
    /*Output disabled*/
    &.ocrext-disabled {
      .ocrext-canvas-container {
        #ocrext-can {
          cursor: default;
        }
      }
    }
    
    /*Output Error*/
    &.ocrext-error {
      .ocrext-ocr-output {
        .ocrext-ocr-message,
        .ocrext-message {
          color: @error;
        }
      }
    }
  }

  /* Minimized State*/
  &.ocrext-wrapper-minimized {
    .ocrext-content {
       .ocrext-canvas-container{
        height:0px;
        overflow: hidden;
      } 
      .ocrext-ocr-output {
        height: 100px;
        overflow-y:auto;
        p.ocrext-ocr-message.expanded {
          height:auto;
        }
      }
    }
  }
}



@media screen and (max-width: 960px) {
  .ocrext-wrapper{
    font-size: @fontSize;
    .ocrext-content {
      .ocrext-ocr-output {
        .mdl-grid{
          .mdl-cell--2-col{
            max-width: 120px;
          }
          .mdl-cell--10-col{
            max-width: 420px;
          }
        }
        h5.ocrext-label {
          span {
            max-width: 70px;
          }
        }
      } 
      .ocrext-footer {
        .ocrext-quickselect-btn-container {
          justify-content:flex-start;
        }
        .ocrext-btn-container {
          /*float: none;*/
          /* button.ocrext-btn {
            margin-right:10px;
            padding: 0 8px;
          } */
        }
      }
    }
    
  }
}

body.ocrext-textoverlay-page {
  font-family:@fontFamily;
  padding: 10px;
  color: #757575;
  .ocrext-textoverlay-title {
    width: 960px;
    text-align: center;
    margin: 10px auto 10px auto;
    padding-bottom: 20px;
    border-bottom: 5px solid #2196f3;
  }
  .ocrext-textoverlay-container {
    cursor: default;
    position: relative;
    width: 960px;
    margin: 0 auto;
    margin-top: 100px;
    a.ocrext-close-link {
      display: none;
    }
  }
  
}